<template>
	<div class="bg-gray-50 min-h-screen font-sans">
		<!-- 顶部悬浮卡片导航栏 -->
		<nav class="fixed w-full top-0 z-50 pt-4 px-4">
			<div class="container mx-auto">
				<div class="flex justify-center space-x-4">
					<!-- 学生报名管理卡片 -->
					<div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer"
						:class="{ 'ring-2 ring-blue-500': activeNavTarget === 'registrations' }"
						@click="switchTab('registrations')">
						<div class="w-48 h-20 flex items-center justify-center px-4">
							<div class="flex items-center space-x-3">
								<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
									<iconify-icon icon="mdi:clipboard-list"
										class="text-blue-600 text-xl"></iconify-icon>
								</div>
								<span class="text-gray-800 font-semibold">学生报名管理</span>
							</div>
						</div>
					</div>

					<!-- 班级成绩管理卡片 -->
					<div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer"
						:class="{ 'ring-2 ring-blue-500': activeNavTarget === 'schedule' }"
						@click="switchTab('schedule')">
						<div class="w-48 h-20 flex items-center justify-center px-4">
							<div class="flex items-center space-x-3">
								<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
									<iconify-icon icon="mdi:chart-bar" class="text-green-600 text-xl"></iconify-icon>
								</div>
								<span class="text-gray-800 font-semibold">班级成绩管理</span>
							</div>
						</div>
					</div>

					<!-- 学生成绩明细卡片 -->
					<button class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer"
						:class="{ 'ring-2 ring-blue-500': activeNavTarget === 'rankings' }"
						@click="switchTab('rankings')">
						<div class="w-48 h-20 flex items-center justify-center px-4">
							<div class="flex items-center space-x-3">
								<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
									<iconify-icon icon="mdi:podium" class="text-purple-600 text-xl"></iconify-icon>
								</div>
								<span class="text-gray-800 font-semibold">学生成绩明细</span>
							</div>
						</div>
					</button>
					<!-- 退出登录-->
					<button @click="tuiChu">
						<span>退出登录</span>
					</button>
				</div>
			</div>
		</nav>

		<!-- 主内容区域 -->
		<main class="pt-32 pb-8">
			<div class="container mx-auto px-4">
				<!-- 1. 学生报名管理 -->
				<section v-show="activeNavTarget === 'registrations'" class="bg-white rounded-xl shadow-lg p-6">
					<div class="flex justify-between items-center mb-6">
						<h1 class="text-2xl font-bold text-gray-800">学生报名管理</h1>
						<div class="flex space-x-2">
							<button class="btn-primary" @click="refreshData">
								<iconify-icon icon="mdi:refresh" class="mr-2"></iconify-icon>
								刷新数据
							</button>
							<button class="btn-secondary" @click="showFilter">
								<iconify-icon icon="mdi:filter" class="mr-2"></iconify-icon>
								筛选
							</button>
						</div>
					</div>

					<!-- 报名列表 -->
					<div class="bg-gray-50 rounded-lg p-4">
						<!-- 表头 -->
						<div class="grid grid-cols-12 gap-4 mb-4 px-4 text-sm font-medium text-gray-600">
							<div class="col-span-3">学生姓名</div>
							<div class="col-span-2">学号</div>
							<div class="col-span-4">报名项目</div>
							<div class="col-span-2">报名时间</div>
							<div class="col-span-1">操作</div>
						</div>

						<!-- 报名数据 -->
						<div class="space-y-3">
							<div v-for="item in registrationList" :key="item.studentId"
								class="grid grid-cols-12 gap-4 p-4 bg-white rounded-lg items-center hover:bg-blue-50 transition-colors">
								<div class="col-span-3 font-medium text-gray-800">{{ item.name }}</div>
								<div class="col-span-2 text-gray-600">{{ item.studentId }}</div>
								<div class="col-span-4 text-gray-600">{{ item.event }}</div>
								<div class="col-span-2 text-gray-500 text-sm">{{ item.registerTime }}</div>
								<div class="col-span-1">
									<span class="status-badge px-3 py-1 rounded-full text-xs font-medium"
										:class="getStatusClass(item.status)">
										{{ item.status === 'pending' ? '待审核' : '已通过' }}
									</span>
								</div>
							</div>
						</div>
					</div>

					<!-- 待审核操作区域 -->
					<div class="mt-6 bg-yellow-50 rounded-lg p-4 border border-yellow-200">
						<div class="flex justify-between items-center">
							<div>
								<h3 class="font-bold text-gray-800 mb-2">待审核操作</h3>
								<div class="text-lg font-semibold">{{ pendingItem.name }} - {{ pendingItem.event }}
								</div>
								<div class="text-sm text-gray-600 mt-1">学号: {{ pendingItem.studentId }}</div>
							</div>
							<div class="flex space-x-3">
								<button
									class="bg-red-100 text-red-600 px-6 py-2 rounded-lg font-semibold hover:bg-red-200 transition-colors flex items-center"
									@click="handleReview(pendingItem, false)">
									<iconify-icon icon="mdi:close" class="mr-2"></iconify-icon>
									不通过
								</button>
								<button
									class="bg-green-100 text-green-600 px-6 py-2 rounded-lg font-semibold hover:bg-green-200 transition-colors flex items-center"
									@click="handleReview(pendingItem, true)">
									<iconify-icon icon="mdi:check" class="mr-2"></iconify-icon>
									通过
								</button>
							</div>
						</div>
					</div>
				</section>

				<!-- 2. 班级成绩管理 -->
				<section v-show="activeNavTarget === 'schedule'" class="bg-white rounded-xl shadow-lg p-6">
					<div class="flex justify-between items-center mb-6">
						<h1 class="text-2xl font-bold text-gray-800">班级成绩管理</h1>
					</div>

					<!-- 选项卡 -->
					<div class="flex space-x-6 border-b border-gray-200 mb-6">
						<button v-for="tab in tabs" :key="tab.id" class="pb-3 px-1 font-medium transition-colors"
							:class="{
                'text-blue-600 border-b-2 border-blue-600': activeTab === tab.id,
                'text-gray-500 hover:text-gray-700': activeTab !== tab.id
              }" @click="switchScheduleTab(tab.id)">
							{{ tab.name }}
						</button>
					</div>

					<!-- 选项卡内容 -->
					<div>
						<!-- 所有比赛项目 -->
						<div v-if="activeTab === 'all'" class="text-center py-12 text-gray-500">
							<iconify-icon icon="mdi:chart-line" class="text-4xl mb-3"></iconify-icon>
							<p>请选择具体比赛类型查看成绩图表</p>
						</div>

						<!-- 田径赛事 -->
						<div v-if="activeTab === 'track'">
							<h3 class="text-lg font-semibold mb-4">班级成绩分布</h3>
							<div ref="scoreChartDom" class="h-80"></div>
						</div>

						<!-- 球类比赛 -->
						<div v-if="activeTab === 'ball'">
							<h3 class="text-lg font-semibold mb-4">球类比赛成绩分布</h3>
							<div ref="ballChartDom" class="h-80"></div>
						</div>

						<!-- 游泳比赛 -->
						<div v-if="activeTab === 'swim'" class="text-center py-12 text-gray-500">
							<iconify-icon icon="mdi:swim" class="text-4xl mb-3"></iconify-icon>
							<p>游泳比赛成绩数据暂未更新</p>
						</div>
					</div>
				</section>

				<!-- 3. 学生成绩明细 -->
				<section v-show="activeNavTarget === 'rankings'" class="bg-white rounded-xl shadow-lg p-6">
					<div class="flex justify-between items-center mb-6">
						<div>
							<h1 class="text-2xl font-bold text-gray-800">学生成绩明细</h1>
							<p class="text-gray-600 mt-1">查看/导出学生个人参赛项目成绩详情</p>
						</div>
						<div class="flex space-x-3">
							<select v-model="selectedCollege"
								class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
								<option value="">所有学院</option>
								<option value="软件学院">软件学院</option>
								<option value="教育学院">教育学院</option>
								<option value="外国语学院">外国语学院</option>
							</select>
							<div class="relative">
								<input type="text" v-model="searchText" placeholder="搜索学生姓名/学号"
									class="pl-4 pr-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
								<iconify-icon icon="mdi:magnify"
									class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></iconify-icon>
							</div>
						</div>
					</div>

					<!-- 成绩表格 -->
					<div class="overflow-x-auto">
						<table class="w-full min-w-[800px]">
							<thead class="bg-gray-50">
								<tr>
									<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">序号</th>
									<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">学生信息</th>
									<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">参赛项目</th>
									<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">成绩</th>
									<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">班级排名</th>
									<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">年级排名</th>
								</tr>
							</thead>
							<tbody class="divide-y divide-gray-200">
								<tr v-for="(student, index) in filteredStudentScores" :key="index"
									class="hover:bg-gray-50 transition-colors">
									<td class="px-6 py-4 text-gray-600">{{ index + 1 }}</td>
									<td class="px-6 py-4">
										<div class="flex items-center space-x-3">
											<div class="w-8 h-8 rounded-full flex items-center justify-center text-white font-medium"
												:style="{ backgroundColor: student.avatarColor }">
												{{ student.name.charAt(0) }}
											</div>
											<div>
												<div class="font-medium text-gray-800">{{ student.name }}</div>
												<div class="text-sm text-gray-500">{{ student.class }} |
													{{ student.studentId }}</div>
											</div>
										</div>
									</td>
									<td class="px-6 py-4 text-gray-700">
										<div v-if="Array.isArray(student.event)">
											<div v-for="(event, idx) in student.event" :key="idx">
												{{ event }}
											</div>
										</div>
										<div v-else>{{ student.event }}</div>
									</td>
									<td class="px-6 py-4 font-medium text-gray-800">
										<div v-if="Array.isArray(student.score)">
											<div v-for="(score, idx) in student.score" :key="idx">
												{{ score }}
											</div>
										</div>
										<div v-else>{{ student.score }}</div>
									</td>
									<td class="px-6 py-4 text-gray-700">
										<div v-if="Array.isArray(student.classRank)">
											<div v-for="(rank, idx) in student.classRank" :key="idx">
												{{ rank }}
											</div>
										</div>
										<div v-else>{{ student.classRank }}</div>
									</td>
									<td class="px-6 py-4 text-gray-700">
										<div v-if="Array.isArray(student.gradeRank)">
											<div v-for="(rank, idx) in student.gradeRank" :key="idx">
												{{ rank }}
											</div>
										</div>
										<div v-else>{{ student.gradeRank }}</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</section>
			</div>
		</main>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		useRouter
	} from 'vue-router'; // useRouter从vue-router导入（路由用）
	const router = useRouter();

	//退出登录
	const tuiChu=()=>{
		router.push({name:'total'});
	}
	
	// 响应式数据
	const activeNavTarget = ref('registrations') // 默认显示学生报名管理
	const activeTab = ref('all')
	const searchText = ref('')
	const selectedCollege = ref('')

	// 选项卡数据
	const tabs = [{
			id: 'all',
			name: '所有比赛项目'
		},
		{
			id: 'track',
			name: '田径赛事'
		},
		{
			id: 'ball',
			name: '球类比赛'
		},
		{
			id: 'swim',
			name: '游泳比赛'
		}
	]

	// 学生报名管理数据
	const registrationList = ref([{
			name: '李明',
			studentId: 'S20210123',
			event: '男子100米跑',
			registerTime: '2023-08-26',
			status: 'pending'
		},
		{
			name: '王芳',
			studentId: 'S20210124',
			event: '女子跳高、女子4×100接力',
			registerTime: '2023-08-25',
			status: 'approved'
		},
		{
			name: '张伟',
			studentId: 'S20210125',
			event: '男子铅球',
			registerTime: '2023-08-27',
			status: 'pending'
		},
		{
			name: '赵娜',
			studentId: 'S20210126',
			event: '女子800米跑',
			registerTime: '2023-08-28',
			status: 'approved'
		},
		{
			name: '刘强',
			studentId: 'S20210127',
			event: '男子跳远',
			registerTime: '2023-08-29',
			status: 'pending'
		}
	])

	const pendingItem = ref(registrationList.value.find(item => item.status === 'pending'))

	// 学生成绩明细数据
	const studentScores = ref([{
			name: '李明',
			studentId: 'S20210123',
			class: '七(3)班',
			avatarColor: '#3b82f6',
			event: '男子100米跑',
			score: '12.45秒',
			classRank: '第2名',
			gradeRank: '第8名'
		},
		{
			name: '王芳',
			studentId: 'S20210124',
			class: '七(3)班',
			avatarColor: '#ec4899',
			event: ['女子跳高', '女子4×100接力'],
			score: ['1.62米', '52.30秒'],
			classRank: ['第1名', '第1名'],
			gradeRank: ['第1名', '第2名']
		},
		{
			name: '张伟',
			studentId: 'S20210125',
			class: '七(3)班',
			avatarColor: '#10b981',
			event: '男子铅球',
			score: '8.75米',
			classRank: '第5名',
			gradeRank: '第15名'
		},
		{
			name: '赵娜',
			studentId: 'S20210126',
			class: '七(3)班',
			avatarColor: '#f59e0b',
			event: ['女子800米跑', '女子4x100接力'],
			score: ['2分45秒', '1分45秒'],
			classRank: ['第1名', '第1名'],
			gradeRank: ['第1名', '第2名']
		}
	])

	const filteredStudentScores = ref([...studentScores.value])

	// 方法
	const switchTab = (tab) => {
		activeNavTarget.value = tab
	}

	const switchScheduleTab = (tab) => {
		activeTab.value = tab
	}

	const refreshData = () => {
		// 数据刷新功能实现
	}

	const showFilter = () => {
		// 筛选面板显示功能实现
	}

	const handleReview = (item, isApproved) => {
		item.status = isApproved ? 'approved' : 'pending'
		pendingItem.value = registrationList.value.find(item => item.status === 'pending')
	}

	const getStatusClass = (status) => {
		return status === 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800'
	}

	// 搜索功能
	/* const handleSearch = () => {
	  if (!searchText.value) {
	    filteredStudentScores.value = [...studentScores.value]
	    return
	  }
	  filteredStudentScores.value = studentScores.value.filter(student =>
	    student.name.includes(searchText.value) || student.studentId.includes(searchText.value)
	  )
	} */
</script>

<style scoped>
	.container {
		max-width: 1200px;
	}

	.btn-primary {
		background: #3b82f6;
		color: white;
		padding: 8px 16px;
		border-radius: 6px;
		font-weight: 600;
		transition: all 0.3s;
		border: none;
		cursor: pointer;
	}

	.btn-primary:hover {
		background: #2563eb;
		transform: translateY(-1px);
	}

	.btn-secondary {
		background: #f3f4f6;
		color: #374151;
		padding: 8px 16px;
		border-radius: 6px;
		font-weight: 600;
		transition: all 0.3s;
		border: none;
		cursor: pointer;
	}

	.btn-secondary:hover {
		background: #e5e7eb;
		transform: translateY(-1px);
	}

	.status-badge {
		font-size: 12px;
		font-weight: 500;
		padding: 4px 12px;
		border-radius: 12px;
	}

	.grid {
		display: grid;
	}

	.grid-cols-12 {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.col-span-1 {
		grid-column: span 1;
	}

	.col-span-2 {
		grid-column: span 2;
	}

	.col-span-3 {
		grid-column: span 3;
	}

	.col-span-4 {
		grid-column: span 4;
	}

	.transition-colors {
		transition: background-color 0.3s ease;
	}

	.transition-all {
		transition: all 0.3s ease;
	}
	
</style>